<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>float 特性实现多行文本截断</title>
  <style>
    .wrap {
      height: 40px;
      line-height: 20px;
      overflow: hidden;
    }
    .wrap .text {
      float: right;
      margin-left: -5px;
      width: 100%;
      word-break: break-all;
    }
    .wrap::before {
      float: left;
      width: 5px;
      content: '';
      height: 40px;
    }
    .wrap::after {
      float: right;
      content: "...";
      height: 20px;
      line-height: 20px;
      /* 为三个省略号的宽度 */
      width: 3em;
      /* 使盒子不占位置 */
      margin-left: -3em;
      /* 移动省略号位置 */
      position: relative;
      left: 100%;
      top: -20px;
      padding-right: 5px;
    }
  </style>
</head>
<body>


<div class="wrap">
  <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos labore sit vel itaque delectus atque quos magnam assumenda quod architecto perspiciatis animi.</div>
</div>

</body>
</html>
